<template>
	<div>
		<div class="breadcrumb_wrap">
			<span class="current">当前位置：</span>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/personalcenter' }">个人中心</el-breadcrumb-item>
				<el-breadcrumb-item>资料中心</el-breadcrumb-item>
				<el-breadcrumb-item>基本资料</el-breadcrumb-item>
			</el-breadcrumb>
			<el-button style="position: absolute; right: 10px; top: 5px" type="primary" plain size="small"
				@click="toDoctorCertify">医生认证</el-button>
		</div>
		<div class="base_data_card">
			<div><span>uid：{{uid}}</span></div>
			<div>
				<span>用户昵称：</span>
				<el-input v-model="input1" placeholder="请输入昵称" style="width: 50%" :disabled="!isEdit"></el-input>
			</div>
			<div style="margin: 0; align-items: self-start">
				<span>修改头像：</span>
				<div class="cover-wrapper">
					<div style="display: flex">
						<img alt="头像" v-if="avatar" :src=" avatar " style="border-radius: 50%; width: 148px; margin-right: 10px" />
						<el-upload
							ref="uploadFile"
							:action="uploadFileUrl" list-type="picture-card" class="cover" :limit="1" accept=".jpg, .png" name="avatarfile"
							:headers="myHeaders"
							:on-change="uploadHandler"
							:show-file-list="false"
							:auto-upload="false"
							:file-list="avatarList"
							:on-success="handleAvatar">
							<i class="el-icon-plus"></i>
						</el-upload>
					</div>
					<div class="cropper">
						<vueCropper ref="cropper" :img="option.img" :output-size="option.size"
							:output-type="option.outputType" :info="true" :full="option.full" :fixed="true"
							:can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox"
							:original="option.original" :auto-crop="option.autoCrop"
							:auto-crop-width="option.autoCropWidth" :auto-crop-height="option.autoCropHeight"
							:center-box="option.centerBox" :high="option.high" mode="cover"
							:max-img-size="option.max" />
						<el-button @click="getCropData" style="margin-left: 20px">截取</el-button>
					</div>
				</div>
			</div>
			<div>
				<span style="margin-right: 10px">性别：</span>
				<el-radio-group v-model="userInfo.gender" style="margin: 0">
					<el-radio :label="0">男</el-radio>
					<el-radio :label="1">女</el-radio>
				</el-radio-group>
			</div>
			<div>
				<span>生日：</span>
				<el-date-picker v-model="birthday" type="date" placeholder="选择日期" :disabled="!isEdit"></el-date-picker>
			</div>
			<div>
				<span>职业：</span>
				<el-input v-model="input3" placeholder="请输入职业" style="width: 50%" :disabled="!isEdit"></el-input>
			</div>
			<div>
				<span>简介：</span>
				<el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="100" show-word-limit
					style="width: 50%" :disabled="!isEdit">
				</el-input>
			</div>
			<div>
				<el-button type="primary" @click="editClick">编辑</el-button>
				<el-button type="primary" @click="saveInfo">保存</el-button>
			</div>
			<el-dialog title="" width="30%" :show-close="false" :close-on-click-modal="false" :visible.sync="subSuccessPop">
				<el-result icon="success" title="保存成功">
					<template slot="extra">
						<el-button type="success" size="medium" @click="subSuccessPop = false">确定</el-button>
					</template>
				</el-result>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		name: "personData",
		data() {
			return {
				baseUrl:'http://124.222.236.194/dev-api',
				fileinfo:{},
				uploadFileUrl:'http://124.222.236.194:8080/ruoyi-admin/system/user/profile/avatar',
				authorization:"",
				myHeaders:{Authorization:this.$cookies.get('token')},
				avatar: "",
				avatarWithout:'',
				avatarList: [],
				option: {
					img: "",
					size: 1,
					full: false,
					outputType: "png",
					canMove: true,
					fixedBox: false,
					original: false,
					canMoveBox: true,
					autoCrop: true,
					centerBox: false,
					high: true,
				},
				text: "",
				textarea: "",
				uid: '',
				input1: "",
				input2: "",
				input3: "",
				input4: "",
				input5: "",
				input6: "",

				userInfo: {
					gender: 0,
				},
				tabsActive: "base",
				emailForm: {
					email: "",
					verifyCode: "",
				},
				identifyCodes: "1234567890abcdef",
				identifyCode: "",
				pwdForm: {
					oldPwd: "",
					newPwd: "",
					newRePwd: "",
				},
				subSuccessPop: false,
				//是否编辑
				isEdit: false,
				pickerOptions: {
					// disabledDate(time) {
					//   return time.getTime() > Date.now();
					// },
				},
        birthday: "",
			};
		},

		watch: {
			$route: {
				handler() {
					this.tabsActive = this.$route.query.tab;
					console.log("tabsActive::", this.tabsActive);
				},
				deep: true,
			},
		},
		components: {},
		mounted() {
			this.authorization=this.$cookies.get('token');
			this.getUserDetail();
		},
		methods: {
			async getUserDetail(){
				const res = await this.$api.reqUserInfo();
				if(res.code===200){
					this.avatar='http://124.222.236.194:8080/ruoyi-admin'+res.user.avatar;
					this.uid=res.user.userId;
					this.input1=res.user.nickName;
					this.userInfo.gender=parseFloat(res.user.sex);
					this.birthday=res.user.birthday;
					this.input3=res.user.career;
					this.textarea=res.user.description;
				}
			},
			async uploadAvatar(imgUrl){
				const res = this.$api.reqUploadAvatar(imgUrl);
				if(res.code==200){
					this.avatar=this.baseUrl+res.imgUrl;
					this.avatarWithout=res.imgUrl;
				}
			},
			async updateProfile(params){
				const res = await this.$api.reqUpdateProfile(params);
				if(res.code==200){
					this.subSuccessPop=true;
					this.isEdit=false;
					this.$parent.getUserInfo();
				}
			},
			// 截取
			getCropData() {
				this.$refs.cropper.getCropBlob((data)=>{
					let  formData = new FormData();
					formData.append("avatarfile",new File([data],this.fileinfo.name,{type:this.fileinfo.type}));
					this.uploadAvatar(formData);
				})
			},
			beforeAvatarUpload(file){
				console.log(file);
			},
			uploadHandler(file,filelist) {
				console.log(file,filelist);
				this.fileinfo = file;
				this.getBase64(file.raw).then((res) => {
					this.option.img = res;
					this.avatarList = [];
					console.log(res);
				});
			},
			getBase64(file) {
				return new Promise(function(resolve, reject) {
					let reader = new FileReader();
					let imgResult = "";
					reader.readAsDataURL(file);
					reader.onload = function() {
						imgResult = reader.result;
					};
					reader.onerror = function(error) {
						reject(error);
					};
					reader.onloadend = function() {
						resolve(imgResult);
					};
				});
			},
			handleAvatar(response, file) {
				console.log(response);
				this.avatarList.push(file);
				 //console.log(this.avatarList);
			},
			// 验证码处理
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min);
			},
			// 刷新验证码
			refreshCode() {
				this.identifyCode = "";
				this.makeCode(this.identifyCodes, 4);
			},
			makeCode(o, l) {
				for (let i = 0; i < l; i++) {
					this.identifyCode +=
						this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
				}
			},
			// handleSelect(key, keyPath) {
			//   //路由
			//   this.$router.push({ name: key, params: { activityId: "0" } });
			// },
			//跳转到医生认证
			toDoctorCertify() {
				this.$router.push("/doctorCertify");
			},
			//保存信息
			saveInfo() {
				let params={
					'avatar':this.avatarWithout,
					'nickName':this.input1,
					'sex':this.userInfo.gender.toString(),
					'birthday':this.birthday,
					'career':this.inpu3,
					'description':this.textarea
				};
				console.log(this.value);
				this.updateProfile(params);
			},
			//是否编辑
			editClick() {
				this.isEdit = !this.isEdit;
			},

			mounted() {
				this.identifyCode = "";
				this.makeCode(this.identifyCodes, 4);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.breadcrumb_wrap {
		width: 100%;
		height: 40px;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 10px;
		box-sizing: border-box;

		.current {
			font-size: 14px;
		}
	}

	.base_data_card {
		margin-top: 20px;
		background-color: #fff;
		padding: 20px;
		padding-left: 98px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		>div {
			text-align: left;
			color: #606266;
			font-size: 14px;
			margin-bottom: 24px;
			display: flex;
			align-items: center;
		}
	}

	.account_card {
		.account_item {
			padding: 30px;
			border-bottom: 1px dashed #ccc;

			.account_item_line {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.account_item_left {
					display: flex;
					align-items: center;

					.account_icon {
						font-size: 26px;
					}

					.account_title {
						color: #909399;
						font-size: 16px;
						margin-left: 15px;
					}
				}
			}

			.email_form_wrap {
				background-color: #f2f2f2;
				width: 500px;
				padding: 30px;
				padding-bottom: 10px;
				margin-top: 10px;
				border-radius: 10px;

				.form_line {
					display: flex;
					align-items: center;

					.verify_code_wrap {
						height: 40px;
						line-height: 40px;
						margin: 0 10px;
						cursor: pointer;
					}
				}
			}
		}
	}

	.pwd_card {
		.pwd_form_wrap {
			width: 500px;
			padding: 30px;

			.form_line {
				display: flex;
				align-items: center;
			}
		}
	}

	.cover {
		::v-deep .el-upload--picture-card {
			border-radius: 50%;
		}
	}

	.cover-wrapper {
		border-radius: 50%;
	}

	.cropper {
		width: 400px;
		height: 300px;
		display: flex;
		margin: 20px 0;
		align-items: end;
		border-radius: 50%;
	}

	.el-form-item {
		margin-bottom: 10px;
	}

	//
	//html * {
	//  outline: 1px solid red
	//}
</style>
